<template>
  <el-dialog :visible.sync="visible" title="班级点名" width="60%" :close-on-click-modal="false" @close="onClose()">
    <el-form ref="form" :inline="true" size="small" label-width="120px">
      <el-form-item>
        <el-button type="primary" @click.native.prevent="handleAllSignIn()">全部签到</el-button>
      </el-form-item>
    </el-form>
    
    <el-table v-loading="listLoading" ref="multipleTable" :data="students" class="tb-edit" :row-style="{padding: 0}" highlight-current-row>
      <el-table-column label="姓名" prop="studentName" min-width="60"/>
      <el-table-column label="节次" prop="courseName" min-width="100"/>
      <el-table-column label="上课时间" min-width="120">
        <template slot-scope="scope">
          <div class="content-rowspan">
            {{ scope.row.startTime | formatDate('MM/dd hh:mm') }} - {{ scope.row.endTime | formatDate('MM/dd hh:mm') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="已点名" prop="status" width="70">
        <template slot-scope="scope">
          <el-button type="text" v-model="scope.row.status" class="el-icon-circle-check " style="font-size:20px;margin-left:8px;cursor:pointer" 
          :class="{active : scope.row.status == 1}" @click.native="onCallClicked(scope.$index, scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="上课反馈" min-width="260">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remark" size="small"/>
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click.native="cancel">取消</el-button>
      <el-button :loading="addLoading" type="primary" @click.native="submit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { feedback, scheduleCallRoll } from '@/api/class'

export default {
  data() {
    return {
      // 外部参数
      scheduleId: 0,
      classId: 0,
      visible: false,
      students: [],
      listLoading: false,
      addLoading: false
    }
  },
  methods: {
    async getStudents() {
      if (this.scheduleId == null && this.scheduleId == 0 && this.classId == null && this.classId == 0) {
        return
      }
      this.listLoading = true
      let para = {
        scheduleId: this.scheduleId,
        classId: this.classId
      }
      scheduleCallRoll(para).then(res => {
        this.listLoading = false
        this.students = res.data
        // 如果是班级点名，告诉系统排课的id
        if (this.classId != 0) {
          this.scheduleId = this.students[0].scheduleId
        }
      }).catch(err => {
        this.listLoading = false
        this.$message.error(err.msg)
      })
    },
    onCallClicked: function(index, row) {
      if (this.students[index].status != 1) {
        this.students[index].status = 1
      } else {
        this.students[index].status = 2
      }
    },
    handleAllSignIn() {
      if (this.students) {
        this.students.forEach(element => {
          element.status = 1
          element.remark = '好好努力，再接再厉'
        });
      }
    },
    onClose() {
      if (this.students) {
        this.students.length = 0
      }
    },
    cancel() {
      this.visible = false
    },
    submit() {
      this.addLoading = true
      feedback(this.scheduleId, this.students).then(res => {
        this.$message({
          message: '点名成功',
          type: 'success'
        })
        this.addLoading = false
        this.visible = false
        this.$emit('callRollSuccess', true)
      }).catch(err => {
        this.addLoading = false
        this.$notify({
          title: '点名失败',
          message: err.msg,
          type: 'error'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cell i {
  color: #606266;
  vertical-align: middle;
}
.el-button--text {
  color: #606266;
}
.el-button--text.active {
  color: #1890ff;
}
.tb-edit .el-input {
  display: none
}
.tb-edit .current-row .el-input {
  display: block
}
.tb-edit .current-row .el-input+span {
  display: none
}
</style>
